<template>
  <div class="perfect-projects-container" :class="{ 'perfect-projects': isFixed }">
    <div>
        <!-- 精华项目轮流展示 -->
        <el-carousel indicator-position="outside">
        <el-carousel-item v-for="item in exceProjects" :key="item.id">
            <h3 justify="center">{{ item.name }}</h3>
            <router-link :to="{ path: '/projectDetail', query: { id: item.pid }}">
              <img :src="item.photo" alt="精华图片" style="width:100%;height:100%;">
            </router-link>
        </el-carousel-item>
        </el-carousel>
    </div>
    <div>
        <h1 style="font-size:1.8rem;color:#409eff">#欢迎来到蓝图分队组的众筹平台</h1>
        <p style="font-size:1.2rem;text-indent:2em;">欢迎使用，在这里，你可以发起众筹项目，为你的梦想实现一点微小的帮助。</p>
        <h1 style="font-size:1.8rem;color:#409eff">#团队成员</h1>
        <ul style="list-style: circle;">
            <li>魏杰：后端开发</li><br>
            <li>罗森：前端开发</li><br>
            <li>王中洋：前端开发</li><br>
            <li>朱庆鑫：文档编写</li><br>
            <li>熊峰锐：文档编写</li><br>
        </ul>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';
export default {
    name: 'PerfectProjects',
    props: {
        exceProjects: {
            type: Array,
            default: () => []
        }
    },
    setup() {
    const header = ref(null);
    const sidebar = ref(null);
    const isFixed = ref(false);
    const scrollThreshold = 100;

    const handleScroll = () => {
      if (window.scrollY > scrollThreshold) {
        isFixed.value = true;
      } else {
        isFixed.value = false;
      }
    };
    onMounted(() => {
      window.addEventListener('scroll', handleScroll);
    });
    onUnmounted(() => {
      window.removeEventListener('scroll', handleScroll);
    });
    return {
      header,
      sidebar,
      isFixed,
    };
  },
}
</script>

<style scoped>
.perfect-projects-container {
  background-color: #ffffff;
  height:750px;
  margin-top:2vmin;
  padding: 3vmin;
  border-radius: 20px;
}
.perfect-projects {
    position: fixed;
    top:0;
    right: 0;
    width:450px;
    margin-top:20px;
    margin-right:100px;
    background-color: #fff;
    padding: 3vmin;
    border-radius: 20PX;
}
</style>